<template>
	<view>
		<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
			<u-form-item :label-position="labelPosition" label-align="center" label="手机号" prop="phone" label-width="150">
				<u-input disabled placeholder="请输入注册手机号码" v-model="model.phone" type="number"></u-input>
			</u-form-item>
			<u-form-item  :label-position="labelPosition" label="验证码" label-align="center" prop="code" label-width="150">
				<u-input placeholder="请输入短信验证码" v-model="model.code" type="text"></u-input>
				<view slot="right" class="u-margin-right-30">
					<button class="code-btn" @click="getCode">{{codeTips}}</button>
				</view>
			</u-form-item>
		</u-form>
		<view class="u-margin-30">
			 <button class="submit-btn" @click="submit">下一步</button>
			 <view class="u-f-ajc u-margin-top-60" @click="empty">
			 	收不到验证码
			 </view>
		</view>
		<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				model: {
					phone:this.$store.state.userInfo?.phone,
					code: ''
				},
				codeTips: '',              //验证码倒计时提示语
				labelPosition: 'left',
				errorType: ['toast'],
				rules: {
					phone: [
						{
							required: true,
							message: '请输入手机号',
							trigger: ['change','blur'],
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change','blur'],
						}
					],
					code: [
						{
							required: true,
							message: '请输入验证码',
							trigger: ['change','blur'],
						},
						{
							type: 'number',
							message: '验证码只能为数字',
							trigger: ['change','blur'],
						}
					]
				},
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			//验证码组件，倒计时期间，每秒触发一次
			codeChange(text) {
				this.codeTips = text;
			},
			// 获取验证码
			getCode() {
				if(this.$u.test.mobile(this.model.phone)){
					if(this.$refs.uCode.canGetCode) {
						// 向后端请求验证码
						uni.showLoading({title: '正在获取验证码'});
						this.$http.post('/api/auth/sms/msg/sendPwd',{phone: this.model.phone}).then(res => {
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							this.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						})
					} else {
						this.$u.toast('倒计时结束后再发送');
					}
				}else{
					this.$u.toast('请输入正确手机号码');
				}
			},
			//下一步
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						uni.redirectTo({
							url: './setPayPwd?code=' + this.model.code + '&phone=' + this.model.phone,
						});
					}
				});
			},
			//点击收不到验证码
			empty(){
				this.$u.toast('请重新输入手机号或验证');
			}
		}
	}
</script>

<style>
	page{
		 background-color: #FFFFFF !important;
	}
</style>
<style lang="scss" scoped>
	.u-margin-30{
		margin: 60rpx 30rpx !important;
		line-height: 62rpx;
	}
	
	.code-btn{
		width: 180rpx; 
		height: 50rpx; 
		color: #606266; 
		line-height: 50rpx;
		font-size: 11px;
	}
	
	.submit-btn{
		margin: 0 auto;
		width: 90%;
		height: 88rpx;
		text-align: center;
		line-height: 88rpx;
		color: #fff;
		font-size: 15px;
		background-color: #2ba4f7;
	}
</style>
